<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>event</title>
    <style type="text/css">

body{
    width: 1000px;
    height: 1000px;
}

div,ul,li{
    margin:0;
    padding: 0;
}

li{
    list-style: none;
}

#div1{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #99CCFF;
    display: none;
}
#div3{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #99CCFF;
    /*right: -100px;*/
    /*top:1000px;*/
}

#divParent{
    width: 400px;
    height: 300px;
    background-color: #FFFFCC;
    position: relative;
}
#div4{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #FFCCCC;
}
#div5{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #CCFF99;
}

#div6{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #CCCCFF;
}

.box{
    position: absolute;
    border:1px dashed black;
}


#parent7{
    width: 600px;
    height: 20px;
    background-color: #ececec;
    position: relative;
}
#div7{
    width: 20px;
    height: 20px;
    background-color: #FF6666;
    position: absolute;
    top:0;
    left:0;
}
#div71{
    width:0;
    height: 0;
    background-color: red;
    filter:alpha(opacity:0);
    opacity:0;
}


#parent8{
    float: left;
    width: 20px;
    height: 200px;
    background-color: #ececec;
    position: relative;
}
#div8{
    width: 20px;
    height: 20px;
    background-color: #FF6666;
    position: absolute;
    top:0;
    left:0;
}

#div81{
    float: left;
    position: relative;
    width: 400px;
    height: 200px;
    border:1px solid black;
    overflow: hidden;
}
#div82{
    position: absolute;
    left:0;
    top:0;
}




    </style>
</head>
<body>


<h2>1、鼠标右键弹出自定义的菜单</h2>
<div id="div1">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>


<h2>2、只能输入数字的字符框</h2>
<input id="txt2" type="text">


<h2>3、拖拽--不能拖出窗口</h2>
<div id="div3">拖拽--不能拖出窗口</div>

<h2 style="margin-top:150px;">4、拖拽--不能拖出父级</h2>
<div id="divParent">我是父级
    <div id="div4">拖拽--不能拖出父级</div>
</div>


<h2>5、拖拽--修复IE仍然能选中文字bug</h2>
<div id="div5">拖拽--修复IE仍然能选中文字bug</div>


<h2 style="margin-top:150px;">6、拖拽--带虚框</h2>
<div id="div6">拖拽--带虚框</div>


<h2 style="margin-top:150px;">7、自定义滚动条--控制div</h2>
<div id="parent7">
    <div id="div7"></div>
</div>
<div id="div71"></div>


<h2>8、自定义滚动条--控制文字滚动</h2>

<div id="div81">
    <div id="div82">
        关于Angular Guide翻译的说明
        一次偶然的机会，我们在Angular.js中文社区群里相遇，更是一次巧妙的交谈，大家对于Angular官方的Guide最新版本没有中文版本表示无助， 所以，本着为社区做贡献的心态，我们临时组织了一个Angular 开发指南翻译团队。

        我们是一群技术的热爱者，更是一群Angular的使用者，但是我们的翻译不代表官方，如有任何问题随时联系我们。

        目前参加翻译工作的人员有9位，分别是：

        ckken，grahamle，NigelYao，asnowwolf，lightma，joeylin，FrankyYang，lrrluo， why520crazy，破狼

        负责审核的成员目前有：二当家

        AngularJS 文档指南
        你需要知道AngularJS

        什么是AngularJS?
        概述
        教程
        AngularJS官方教程
        选择Angular的十个理由
        AngularJS的设计原则(视频)
        60分钟入门教程(视频)
        jQuery程序员学习Angular必读
        核心概念
        模板

        在Angular应用中，你把通过数据填充页面模板的工作从后端移到了前端，这导致动态更新的页面有了更好的代码结构。下面是你将用到的一些核心概念。

        数据绑定(Data Binding)
        表达式(Expression)
        指令(Directive)
        视图(View)和路由(Route) (参见范例)
        过滤器(Filter)
        表单(Form) 和 AngularJS的表单概念
        程序结构

        博客：什么时候使用指令(Directive)、控制器(Controller)或服务(Service)
        程序装载： 依赖注入(DI, Dependency injection)
        把数据模型(Model)导出给视图(View)： 作用域(Scope)
        和服务器通讯： $http, $resource
        其他 AngularJS 功能

        动画： 核心概念, ngAnimate API, 以及 AngularJS 1.2中的动画
        安全： 受限场景转义(SCE), 内容安全策略(CSP), $sanitize, 视频
        国际化(i18n)和本地化(l10n)： Angular的国际化(i18n)和本地化(l10n)指南, 日期过滤器, 货币过滤器, 创建多语种支持
        移动开发： 触控(Touch)事件
        测试

        单元测试： 使用Karma（视频）, 单元测试, 测试服务, 在WebStorm中使用Karma
        场景测试： Protractor
        具体的主题
        登录：Google范例, Facebook范例, 认证策略, unix风格的认证
        移动开发： Angular移动开发指南, PhoneGap
        其他语言： CoffeeScript, Dart
        实时应用：Socket.io, OmniBinder
        可视化： SVG, D3.js
        工具
        调试： Batarang
        测试： Karma, Protractor
        编辑器： Webstorm (以及 视频), Sublime Text, Visual Studio
        工作流： Yeoman.io 以及 Angular Yeoman 指南
        补充 类库
        这里是部分在Angular方面提供了明确支持和文档的外部库的简短清单。你可以到ngmodules.org上找到已知Angular外部库的完整列表。

        国际化(i18n)： angular-translate, angular-gettext
        RESTful服务： Restangular
        SQL和NoSQL后端： BreezeJS, AngularFire
        UI部件：KendoUI, UI Bootstrap, Wijmo
        部署
        概括

        Javascript最小化：背景, ngmin自动处理工具
        跟踪： 分析(Google Analytics), 记录前端错误
        SEO: 手动, prerender.io, Brombone, SEO.js, SEO4Ajax
        关于prerender的中文资料，详见破狼的博客

        服务-指定

        Django： 入门, 集成AngularJS与Django
        FireBase： AngularFire, 使用AngularJS和FireBase开发实时应用 (视频)
        Google云平台：使用Cloud Endpoints, 使用Go
        Hood.ie: Angular 60分钟强力秀
        MEAN开发栈：博客, 起步, Google GDL视频
        Rails：入门, 集成AngularJS与Rails4, angularjs-rails
        PHP：构建RESTful的Web服务, Laravel 4 端到端(视频)
        学习资源
        书籍

        AngularJS 作者：Brad Green 和 Shyam Seshadri
        Mastering Web App Development 作者：Pawel Kozlowski 和 Pete Bacon Darwin
        AngularJS Directives（AngularJS指令详解） 作者：Alex Vanston
        Recipes With AngularJS（AngularJS秘诀） 作者：Frederik Dietz
        Developing an AngularJS Edge 作者：Christopher Hiller
        ng-book: The Complete Book on AngularJS（AngularJS大全） 作者：Ari Lerner
        视频:

        egghead.io
        Youtube上的Angular专题
        课程

        免费在线教程： thinkster.io, CodeAcademy
        收费在线教程： Pluralsite (3门课), Tuts+, lynda.com
        收费现场培训： angularbootcamp.com
        帮助
        如果你有个问题想得到帮助，最好在Plunker, JSFiddle, 或者类似的站点创建一个示例，并提交给下面的网站：

        Stackoverflow.com
        AngularJS邮件列表
        AngularJS IRC频道
        社交渠道
        日常更新： Google+ 或 Twitter
        每周新闻： ng-newsletter
        Meetups: meetup.com
        官方新闻与发布：AngularJS Blog
        贡献给 AngularJS
        虽然Angular团队中有好多核心成员都在Google工作，但Angular是一个凝聚了100位贡献者的开源项目，如果你已经准备好成为其中的一员，请阅读AngularJS贡献指南

        中文资源
        本Angular业余翻译组的“家”，欢迎加盟

        Angular中文文档的预览站（包括非正式发布的部分）

        angularjs中文社区 技术资料、中文文档，这个网站本身也是用angular + nodejs开发的

        破狼Blog 破狼cnBlog 一位angular爱好者的博客

        github AngularJS-Learning 包含AngularJS很多资料的github库

        QQ交流群1 278252889(满)

        QQ交流群2 305739270

        最后一点
        没有找到你想要的？访问AngularJS-Learning可以找到更多的视频、教程、博客的列表。

        如果你认为某些优秀的AngularJS资源应该放在本页面，请在Google+或Twitter告诉我们。
    </div>
</div>
<div id="parent8">
    <div id="div8"></div>
</div>



<div></div>
<script>
window.onload = function(){


    // 1、鼠标右键弹出自定义的菜单
    // oncontextmenu 当鼠标右键点击，弹出默认菜单
    var oDiv1 = document.getElementById("div1");
    document.oncontextmenu = function(e){

        var oEvent = e || event;
        var pos = getPos(oEvent);

        oDiv1.style.left = pos.x + 'px';
        oDiv1.style.top = pos.y + 'px';
        oDiv1.style.display = "block";

        // 阻止默认事件
        return false;  
    }

    document.onclick = function(){
        oDiv1.style.display = 'none';
    }
    oDiv1.onclick = function(e){
        var oEvent = e || event;
        oDiv1.style.display = 'block';
        oEvent.cancelBubble = true;
    }



    // 2、只能输入数字的字符框
    var oTxt2 = document.getElementById("txt2");
    oTxt2.onkeydown = function(e){
        var oEvent = e || event;
        // keyCode:48-57   0-9  (没有考虑小键盘的数字)
        // keyCode:8  backspace 
        // keyCode:37  左键 
        // keyCode:39  右键 
        // 需要改进下：如果数字输入错误，可以backspace回退，能左右移动光标位置
        if(oEvent.keyCode != 8 && oEvent.keyCode != 37 && oEvent.keyCode != 39 &&(oEvent.keyCode < 48 || oEvent.keyCode > 57)){
            return false;
        }
    }



    // 3、拖拽--不能拖出窗口
    // 直接给document加事件
    // FF下，空DIV拖拽bug，阻止默认事件
    // 防止拖出页面，修正位置
    var oDiv3 = document.getElementById("div3");
    // 鼠标在div3内点击时，相对于div3的横向、纵向距离
    var disX = 0;
    var disY = 0;
    oDiv3.onmousedown = function(e){
        var oEvent = e || event;
        disX = oEvent.clientX - oDiv3.offsetLeft;
        disY = oEvent.clientY - oDiv3.offsetTop;

        console.log(oEvent.clientX, oDiv3.offsetLeft, disX);
        console.log(oEvent.clientY, oDiv3.offsetTop, disY);

        // 如果把onmousemove绑定在div3，如果鼠标移动的快一点，一旦鼠标脱离div3，onmousemove就不会触发了； 
        // document是无限大的，鼠标是不会脱离document的，所以绑定到document上
        document.onmousemove = function(e){
            var oEvent = e || event;
            var left = oEvent.clientX - disX;
            var top = oEvent.clientY - disY;
            //左边出不去
            if(left < 0){  
                left = 0;
            }
            //右边出不去
            else if(left >　document.documentElement.clientWidth - oDiv3.offsetWidth){
                left =　document.documentElement.clientWidth - oDiv3.offsetWidth;
            }
            //上边出不去
            if(top < 0){  
                top = 0;
            }
            //下边出不去
            else if(top > document.documentElement.clientHeight - oDiv3.offsetHeight){
                top = document.documentElement.clientHeight - oDiv3.offsetHeight;
            }

            oDiv3.style.left = left + 'px';
            oDiv3.style.top = top + 'px';
        }
        document.onmouseup = function(){
            document.onmouseup = null;
            document.onmousemove = null;
        }
        // 阻止FF空div拖拽bug，
        // 修复其他浏览器文字（div里面的文字，div外的问题）选中问题
        // 但是IE7-8, 在拖拽的时候，仍然有文字选中问题
        return false;
    }




    // 4、拖拽--不能拖出父级 + 吸附
    var oDivParent = document.getElementById("divParent");
    var oDiv4 = document.getElementById("div4");
    // 鼠标在div3内点击时，相对于div3的横向、纵向距离
    var disX = 0;
    var disY = 0;
    oDiv4.onmousedown = function(e){
        var oEvent = e || event;
        disX = oEvent.clientX - oDiv4.offsetLeft;
        disY = oEvent.clientY - oDiv4.offsetTop;

        console.log(oEvent.clientX, oDiv4.offsetLeft, disX)
        console.log(oEvent.clientY, oDiv4.offsetTop, disY)

        document.onmousemove = function(e){
            var oEvent = e || event;
            var left = oEvent.clientX - disX;
            var top = oEvent.clientY - disY;
            //左边出不去
            if(left < 20){  
                left = 0;
            }
            //右边出不去
            else if(left > oDivParent.offsetWidth - oDiv4.offsetWidth - 20){
                left =　oDivParent.offsetWidth - oDiv4.offsetWidth;
            }
            //上边出不去
            if(top < 20){  
                top = 0;
            }
            //下边出不去
            else if(top > oDivParent.offsetHeight - oDiv4.offsetHeight - 20){
                top = oDivParent.offsetHeight - oDiv4.offsetHeight;
            }
            oDiv4.style.left = left + 'px';
            oDiv4.style.top = top + 'px';
        }
        document.onmouseup = function(){
            document.onmouseup = null;
            document.onmousemove = null;
        }

        return false;
    }



    // 5、拖拽--修复IE仍然能选中文字bug
    var oDiv5 = document.getElementById("div5");
    // 鼠标在div3内点击时，相对于div3的横向、纵向距离
    var disX = 0;
    var disY = 0;
    oDiv5.onmousedown = function(e){
        var oEvent = e || event;
        disX = oEvent.clientX - oDiv5.offsetLeft;
        disY = oEvent.clientY - oDiv5.offsetTop;

        function mouseMove(e){
            var oEvent = e || event;
            var left = oEvent.clientX - disX;
            var top = oEvent.clientY - disY;
            oDiv5.style.left = left + 'px';
            oDiv5.style.top = top + 'px';
        }
        function mouseUp(e){
            this.onmouseup = null;
            this.onmousemove = null;
            // 释放捕获：releaseCapture(), 此方法只有IE识别
            // 如果不释放，页面上的其他任何操作都无法生效，例如滚动条，地址栏的点击等，太恐怖了~~
            if(oDiv5.releaseCapture){
                oDiv5.releaseCapture();
            }
        }
        // IE 
        // 把onmousemove，onmouseup绑定到div5
        if(oDiv5.setCapture){
            oDiv5.onmousemove = mouseMove;
            oDiv5.onmouseup = mouseUp;
            // 事件捕获： setCapture() 此方法只有IE识别，作用是页面上所有的事件都聚集到div5
            // 那么鼠标在didv5上快速拖动，div5就不会被甩开了
            oDiv5.setCapture();
        }
        // Chrome FF
        // 把onmousemove，onmouseup绑定到document
        else{
            document.onmousemove = mouseMove;
            document.onmouseup = mouseUp;
        }
        // 阻止FF空div拖拽bug，
        // 修复其他浏览器文字（div里面的文字，div外的问题）选中问题
        // 但是IE7-8, 在拖拽的时候，仍然有文字选中问题（setCapture来解决）
        return false;
    }  



    // 6、拖拽--带虚框
    var oDiv6 = document.getElementById("div6");
    // 鼠标在div3内点击时，相对于div3的横向、纵向距离
    var disX = 0;
    var disY = 0;
    oDiv6.onmousedown = function(e){
        var oEvent = e || event;
        disX = oEvent.clientX - oDiv6.offsetLeft;
        disY = oEvent.clientY - oDiv6.offsetTop;
        // 创建虚线框，插入到body
        var oBox = document.createElement("div");
        oBox.className = 'box';
        oBox.style.width = oDiv6.offsetWidth - 2 + 'px';
        oBox.style.height = oDiv6.offsetHeight - 2 + 'px';
        oBox.style.left = oDiv6.offsetLeft + 'px';
        oBox.style.top = oDiv6.offsetTop + 'px';
        document.body.appendChild(oBox);

        function mouseMove(e){
            var oEvent = e || event;
            var left = oEvent.clientX - disX;
            var top = oEvent.clientY - disY;
            oBox.style.left = left + 'px';
            oBox.style.top = top + 'px';
        }
        function mouseUp(e){
            this.onmouseup = null;
            this.onmousemove = null;
            // 释放捕获：releaseCapture(), 此方法只有IE识别
            // 如果不释放，页面上的其他任何操作都无法生效，例如滚动条，地址栏的点击等，太恐怖了~~
            if(oBox.releaseCapture){
                oBox.releaseCapture();
            }
            // 设置oDiv的定位，把box干掉
            oDiv6.style.left = oBox.offsetLeft + 'px';
            oDiv6.style.top = oBox.offsetTop + 'px';
            document.body.removeChild(oBox);
        }
        // IE 
        // 把onmousemove，onmouseup绑定到oBox
        if(oBox.setCapture){
            oBox.onmousemove = mouseMove;
            oBox.onmouseup = mouseUp;
            // 事件捕获： setCapture() 此方法只有IE识别，作用是页面上所有的事件都聚集到div5
            // 那么鼠标在didv5上快速拖动，div5就不会被甩开了
            oBox.setCapture();
        }
        // Chrome FF
        // 把onmousemove，onmouseup绑定到document
        else{
            document.onmousemove = mouseMove;
            document.onmouseup = mouseUp;
        }
        // 阻止FF空div拖拽bug，
        // 修复其他浏览器文字（div里面的文字，div外的问题）选中问题
        // 但是IE7-8, 在拖拽的时候，仍然有文字选中问题（setCapture来解决）
        return false;
    } 




    // 7、自定义滚动条--控制div
    var oDiv7 = document.getElementById("div7");
    var oParent7 = document.getElementById("parent7");
    var oDiv71 = document.getElementById("div71");
    var disX = 0;
    var disY = 0;
    oDiv7.onmousedown = function(e){
        var oEvent = e || event;
        disX = oEvent.clientX - oDiv7.offsetLeft;
        disY = oEvent.clientY - oDiv7.offsetTop;

        function mouseMove(e){
            var oEvent = e || event;
            var left = oEvent.clientX - disX;
            // var top = oEvent.clientY - disY;
            if(left < 0){
                left = 0;
            }
            if(left > oParent7.offsetWidth - oDiv7.offsetWidth){
                left = oParent7.offsetWidth - oDiv7.offsetWidth;
            }
            oDiv7.style.left = left + 'px';
            // oDiv7.style.top = top + 'px';

            // left：0-580
            // left/580 : 0-1
            var scale = left/(oParent7.offsetWidth - oDiv7.offsetWidth);
            document.title = scale;

            // 用自定义的滚动条控制div的大小
            oDiv71.style.width = 300 * scale + 'px';
            oDiv71.style.height = 300 * scale + 'px';
            // 控制opacity
            oDiv71.style.filter = "alpha(opacity:"+scale*100+")";
            oDiv71.style.opacity = scale;

        }
        function mouseUp(e){
            this.onmouseup = null;
            this.onmousemove = null;
            // 释放捕获：releaseCapture(), 此方法只有IE识别
            if(oDiv7.releaseCapture){
                oDiv7.releaseCapture();
            }
        }
        // IE 
        if(oDiv7.setCapture){
            oDiv7.onmousemove = mouseMove;
            oDiv7.onmouseup = mouseUp;
            oDiv7.setCapture();
        }
        // Chrome FF
        else{
            document.onmousemove = mouseMove;
            document.onmouseup = mouseUp;
        }
        return false;
    }  


    // 8、自定义滚动条--控制文字滚动
    var oDiv8 = document.getElementById("div8");
    var oParent8 = document.getElementById("parent8");
    var oDiv81 = document.getElementById("div81");
    var oDiv82 = document.getElementById("div82");
    var disX = 0;
    var disY = 0;
    oDiv8.onmousedown = function(e){
        var oEvent = e || event;
        disX = oEvent.clientX - oDiv8.offsetLeft;
        disY = oEvent.clientY - oDiv8.offsetTop;

        function mouseMove(e){
            var oEvent = e || event;
            // var left = oEvent.clientX - disX;
            var top = oEvent.clientY - disY;
            if(top < 0){
                top = 0;
            }
            if(top > oParent8.offsetHeight - oDiv8.offsetHeight){
                top = oParent8.offsetHeight - oDiv8.offsetHeight;
            }
            // oDiv8.style.left = left + 'px';
            oDiv8.style.top = top + 'px';

            // top：0-180
            // top/180 : 0-1
            var scale = top/(oParent8.offsetHeight - oDiv8.offsetHeight);
            document.title = scale;

            // 用自定义的滚动条控制文字滚动
            oDiv82.style.top = - scale * (oDiv82.offsetHeight - oDiv81.offsetHeight)+ 'px';
        }
        function mouseUp(e){
            this.onmouseup = null;
            this.onmousemove = null;
            // 释放捕获：releaseCapture(), 此方法只有IE识别
            if(oDiv8.releaseCapture){
                oDiv8.releaseCapture();
            }
        }
        // IE 
        if(oDiv8.setCapture){
            oDiv8.onmousemove = mouseMove;
            oDiv8.onmouseup = mouseUp;
            oDiv8.setCapture();
        }
        // Chrome FF
        else{
            document.onmousemove = mouseMove;
            document.onmouseup = mouseUp;
        }
        return false;
    }  







    // 封装函数，获取鼠标在页面的绝对位置
    function getPos(e){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        return {
            x: e.clientX + scrollLeft,
            y: e.clientY + scrollTop
        }
    }

    function getByClass(oParent, sClass){
        var aResult = [];
        var aEle = oParent.getElementsByTagName("*");
        for(var i=0; i<aEle.length; i++){
            if(aEle[i].className === sClass){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }

}


</script>
</body>
</html>